//其他数据统计页面
<template>
  <!-- 面包屑导航，展示当前页面的路径 -->
  <el-breadcrumb>
    <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>其他数据统计</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 描述性展示框，显示统计数据 -->
  <el-descriptions
    class="margin-top"
    title="其他数据统计"
    :column="1"
    border
    style="margin-top: 20px;width: 50%;"
  >

    <!-- 展示空气质量检测总数量 -->
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          空气质量检测总数量
        </div>
      </template>
      {{aqiCount}}
    </el-descriptions-item>

    <!-- 展示空气质量检测良好数量 -->
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          空气质量检测良好数量
        </div>
      </template>
      {{aqiGoodCount}}
    </el-descriptions-item>

    <!-- 展示省网格覆盖率 -->
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          省网格覆盖率
        </div>
      </template>
      {{provinceCoverage}}%
    </el-descriptions-item>

    <!-- 展示大城市网格覆盖率 -->
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          大城市网格覆盖率
        </div>
      </template>
      {{cityCoverage}}%
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
import { ref, inject } from "vue";

const axios = inject("axios");

//AQI检查总数量
const aqiCount = ref(0);
//AQI检查良好总数量
const aqiGoodCount = ref(0);
//省网格覆盖率
const provinceCoverage = ref(0);
//大城市网格覆盖率
const cityCoverage = ref(0);

// 初始化函数，用于获取数据
const init = () => {
  // 发送请求获取AQI检查总数量
  axios
    .post("statistics/getAqiCount")
    .then((response) => {
      aqiCount.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });

  // 发送请求获取AQI检查良好数量
  axios
    .post("statistics/getAqiGoodCount")
    .then((response) => {
      aqiGoodCount.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });

  // 发送请求获取省网格覆盖率
  axios
    .post("statistics/getProvinceCoverage")
    .then((response) => {
      provinceCoverage.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });

  // 发送请求获取大城市网格覆盖率
  axios
    .post("statistics/getCityCoverage")
    .then((response) => {
      cityCoverage.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>

<style scoped>
.table-box {
  width: 80%;
  height: 450px;
  overflow: auto;
}
</style>

<!--http://localhost:8080/nepm/statistics/getAqiCount（获取AQI检测总数量）-->
<!--传参：空-->
<!--返回：response对象-->
<!--绑定到的响应式对象：aqiCount.value（AQI检测总数量）-->

<!--http://localhost:8080/nepm/statistics/getAqiGoodCount（获取AQI良好检测数量）-->
<!--传参：空-->
<!--返回：response对象-->
<!--绑定到的响应式对象：aqiGoodCount.value（AQI良好检测数量）-->

<!--http://localhost:8080/nepm/statistics/getProvinceCoverage（获取省网格覆盖率）-->
<!--传参：空-->
<!--返回：response对象-->
<!--绑定到的响应式对象：provinceCoverage.value（省网格覆盖率）-->

<!--http://localhost:8080/nepm/statistics/getCityCoverage（获取大城市网格覆盖率）-->
<!--传参：空-->
<!--返回：response对象-->
<!--绑定到的响应式对象：cityCoverage.value（大城市网格覆盖率）-->

<!--数据渲染方式-->
<!--使用el-descriptions组件以描述列表形式展示数据-->
<!--通过双花括号{{}}模板语法直接显示响应式变量的值：-->
<!--{{aqiCount}}（空气质量检测总数量）-->
<!--{{aqiGoodCount}}（空气质量良好数量）-->
<!--{{provinceCoverage}}%（省网格覆盖率，带百分号）-->
<!--{{cityCoverage}}%（大城市网格覆盖率，带百分号）-->
<!--每个数据项都有自定义的label模板-->
<!--设置了描述列表的样式（50%宽度，带边框）-->
